import React from 'react'
import Topbar from '../../components/Topbar/Topbar';

import './Logon.css'
class Logon extends React.Component {

	constructor(props) {
	  super(props);
	  this.state = {
		
	  };
	}

    testing(){
        //校验两次输入的密码是否相同
        if(this.state.pwd==this.state.repwd){
            //验证手机号是否已经注册过
            const par={
                tel:this.state.tel,
                password:this.state.pwd
            }
            fetch('https://www.prebeauty.work/userlogin/login',{
                method:'POST',
                body:JSON.stringify(par),
                headers:{
                    'content-type': 'application/json'
                }
            }).then((res)=>{
                if(res.status===200){
                    res.json().then((data)=> {
                        if(data.code=='failed'){
                            //没有注册过，添加一个新用户，并跳转至首页，全局中存一个userid
                            
                            return true;
                        }else if(data.code=='success'){
                            //如果注册过，提示登录，跳转至登录页面
                            console.log('此账号已经注册过！')
                            return false
                        }
                    })
                }else {
                    alert("出现一个问题");
                }
            })
        }else{
            console.log('两次输入的密码不相同！')
            return false
        }
    }

    userLogon(){
        console.log('userlogon');
        if(this.state.pwd==this.state.repwd){
            const url='https://www.prebeauty.work/userlogin/register'
            const param={
                name:this.state.txt,
                password:this.state.pwd,
                tel:this.state.tel,
                image: 'https://www.prebeauty.work/images/moren.jpg'
            }
            fetch(url,{
                method:'POST',
                body:JSON.stringify(param),
                headers:{
                    'content-type': 'application/json'
                }
            }).then((res)=>{
                if(res.status===200){
                    res.json().then((data)=> {
                        if(data.code=='failed'){
                            //如果注册过，提示登录，跳转至登录页面
                            console.log('此账号已经注册过！')
                        }else if(data.code=='success'){
                            //没有注册过，添加一个新用户，并跳转至首页，全局中存一个userid
                            console.log('注册成功！')
                            this.props.history.push('/Login')
                        }
                    })
                }else {
                    alert("出现一个问题");
                }
            })
        }else{
            console.log('两次输入的密码不相同！')
        }
    }

    telChange(e){
        this.setState({
            tel:e.target.value
        })
    }
    txtChange(e){
        this.setState({
            txt:e.target.value
        })
    }
    pwdChange(e){
        this.setState({
            pwd:e.target.value
        })
    }
    repwdChange(e){
        this.setState({
            repwd:e.target.value
        })
    }

	render() {
        return (
            <div>
                <Topbar name="注册" />
                <div className="logodiv">
                    <img 
                        src='https://www.prebeauty.work/static/media/logo.d39a7ba3.png' 
                        alt='' 
                        className="logo" 
                    />
                </div>
                <div className="teldiv">
                    <p className="tt">手机号码：</p>
                    <input 
                        type='tel' 
                        className="tel" 
                        placeholder="请输入有效的手机号码"
                        onChange={this.telChange.bind(this)}
                    ></input>
                </div>
                <div className="txtdiv">
                    <p className="tt">设置昵称：</p>
                    <input 
                        type='text' 
                        className="txt" 
                        placeholder="请设置您的昵称"
                        onChange={this.txtChange.bind(this)}
                    ></input>
                </div>
                <div className="pwddiv">
                    <p className="tt">设置密码：</p>
                    <input 
                        type='password' 
                        className="pwd" 
                        placeholder="请设置登录密码"
                        onChange={this.pwdChange.bind(this)}
                    ></input>
                </div>
                <div className="repwddiv">
                    <p className="tt">确认密码：</p>
                    <input 
                        type='password' 
                        className="repwd" 
                        placeholder="请再次确认密码"
                        onChange={this.repwdChange.bind(this)}
                    ></input>
                </div>
                <input type='button' className="btn" value="注册" onClick={this.userLogon.bind(this)}></input>
            </div>
        )
    }
}

export default Logon